<template>
  <div>
  <!-- 指标基本信息label 开始  -->
  <div>
    <div class="header">
      <span class="headerIcon">|</span>
      <span class="headerText">{{pageName}}</span>
    </div>
  </div>
  <!-- 指标基本信息label 结束  -->
  <!-- 指标基本信息label 结束  -->
  <p style="color:#666666;">请使用下面的穿梭框选择需要参与测评的十三个教学部门党政负责人和被测评的处级(科级)干部,点击“添加”按钮生成考核关系。</p>
  <el-form ref="form" :model="form" class="form" label-width="135px">
    <el-row>
      <el-col :span="8">
        <div class="grid-content bg-purple" style="text-align: center;vertical-align: middle;line-height:36px">
          参与测评的十三个教学部门党政负责人
        </div>
      </el-col>
      <el-col :span="1">
        <div class="grid-content bg-purple-light"></div>
      </el-col>
      <el-col :span="15">
        <div class="grid-content bg-purple" style="text-align: center;vertical-align: middle;line-height:36px">
          被测评的处级(科级)干部
        </div>
      </el-col>
    </el-row>
    <el-row style="border-bottom: 1px solid #eeeeee;">
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <treeselect id="deptModelId" v-model="form.deptId" :options="baseDeptOptions"
                      :show-count="true" placeholder="请选择部门"
          />
          <el-select v-model="form.assessed" placeholder="请选择" style="width: 100%" clearable>
            <el-option
              v-for="item in assesseds"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>

          <br/>
          <br/>

        </div>
      </el-col>
      <el-col :span="1">
        <div class="grid-content bg-purple-light"></div>
      </el-col>
      <el-col :span="15">
        <div class="grid-content bg-purple" style="height:180px;">
          <treeselect id="deptModelId2" v-model="form.deptId2" :options="baseDeptOptions"
                      :show-count="true" placeholder="请选择部门"
          />
          <div style="height:100px;overflow-y: scroll;margin-bottom: 10px;border:1px solid #eeeeee;">
            <el-checkbox v-for="(item, index) in equipments"
                         :label="item.value" class="listitem"
                         :key="item.label" @change="checked=>saveTempBeassessed(checked, item)">
              {{item.label}}

            </el-checkbox>
          </div>

          <el-button type="primary" style="float: right;bottom: 10px;margin-right: 20px;margin-bottom: 20px;"
                     @click="saveRelation">保存
          </el-button>
<!--          <el-button type="primary" style="float: right;bottom: 10px;margin-right: 20px;margin-bottom: 20px;"-->
<!--                     @click="testOpen">测试打开-->
<!--          </el-button>-->
        </div>
      </el-col>
    </el-row>
  </el-form>

  <!-- 指标基本信息label 开始  -->
  <div>
    <div class="header">
      <span class="headerIcon">|</span>
      <span class="headerText">已保存的十三个教学部门党政负责人测评关系</span>
    </div>
  </div>
  <!-- 指标基本信息label 结束  -->
  <el-row style="border-bottom: 1px solid #eeeeee;">
    <el-col :span="8">
      <div class="grid-content bg-purple">
        <el-select v-model="form.assessed" placeholder="请选择" style="width: 100%;color:#000000" clearable
                   disabled="disabled">
          <el-option
            v-for="item in assesseds"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
    </el-col>
    <el-col :span="1">
      <div class="grid-content bg-purple-light"></div>
    </el-col>
    <el-col :span="15">
      <div class="grid-content bg-purple" style="height:180px;">
        <div style="height:150px;overflow-y: scroll;margin-bottom: 10px;border:1px solid #eeeeee;">
          <div v-for="(item, index) in savedequipments" style="font-weight: normal;">
            {{item.label}}&nbsp;&nbsp;测评地址：
            <el-link type="primary" :href="item.path" target="_blank">{{item.path}}</el-link>
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
  </div>
</template>

<script>
  import { treeselect } from '@/api/system/dept'
  import Treeselect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  import { getUserProfile, listUser } from '@/api/system/user'
  import * as kaopingService from '@/api/dangjian/kaopingService'

  export default {
    name: 'panel4',
    data() {
      return {
        pageName:'十三个教学部门党政负责人评分',
        baseDeptOptions: [],
        assesseds: [],//待选考评人
        form: {
          deptId: undefined,
          deptId2: undefined,
          assessed: undefined
        },
        checkedEquipments: [], //随意修改后的checked项
        equipments: [],
        savedequipments: []
      }
    }, watch: {
      // 监听deptId
      'form.deptId': 'currDeptChange',
      'form.deptId2': 'handleSelectEvent2',
      'form.assessed': 'selectAssessed'
    },
    components: {
      Treeselect
    },
    methods: {
      currDeptChange(val) {
        var that = this
        var queryUserListParam = {}
        queryUserListParam.deptId = val
        console.log('queryUserListParam-----', JSON.stringify(queryUserListParam))
        listUser(queryUserListParam).then(
          response => {
            //console.log('queryUser result:', response)
            var assesseds = response.rows
            var users = []
            for (var i = 0; i < assesseds.length; i++) {
              users.push({
                value: assesseds[i].userId,
                label: assesseds[i].nickName
              })
            }
            that.assesseds = users
          }
        )
      },
      getDepts() {
        treeselect().then(response => {
          this.baseDeptOptions = response.data
        })
      },
      handleSelectEvent2(val) {
        var that = this
        var queryUserListParam = {}
        queryUserListParam.deptId = val
        console.log('this.queryUserListParam', this.queryUserListParam)
        listUser(queryUserListParam).then(
          response => {
            // console.log('queryUser result:', response)
            var assesseds = response.rows
            var users = []
            for (var i = 0; i < assesseds.length; i++) {
              users.push({
                value: assesseds[i].userName,
                label: assesseds[i].nickName
              })
            }
            that.equipments = users
          }
        )
      },
      selectAssessed(val) {
        var that = this
        var queryUserListParam = {}
        queryUserListParam.assessed = val
        queryUserListParam.assesstype=that.pageName;
        kaopingService.getYuanjiByAssessed(queryUserListParam).then(response => {
          var savedequipments = response.data
          var users = []
          for (var i = 0; i < savedequipments.length; i++) {
            users.push({
              value: savedequipments[i].user_id,
              label: savedequipments[i].nick_name,
              path: savedequipments[i].path
            })
          }
          that.savedequipments = users
        })
      },
      saveRelation() {
        var that = this
        if (that.form.assessed == undefined || that.form.assessed == '') {
          that.$message.error('没有选择参与考评的人员')
          return
        }
        if (that.checkedEquipments.length < 1) {
          that.$message.error('没有选择被考评的人员')
          return
        }
        //保存关系
        var para = {
          assessed: that.form.assessed,
          beassessed: that.checkedEquipments,
          assesstype: that.pageName,
          path: 'http://' + window.location.host + '/kpipage.html'
        }
        kaopingService.saveRelation(para).then(response => {
          if (response.code == 200) {
            that.$message.success('数据已保存')
            var savedequipments = response.data
            var users = []
            for (var i = 0; i < savedequipments.length; i++) {
              users.push({
                value: savedequipments[i].user_id,
                label: savedequipments[i].nick_name,
                path: savedequipments[i].path
              })
            }
            that.savedequipments = users
          }
        })
      },
      saveTempBeassessed(checked, val) {
        //console.log("----------"+JSON.stringify(checked)+"----------"+JSON.stringify(val));
        //console.log("----------"+(typeof checked))
        var that = this
        var userName = val.value
        if (checked) {
          //向数组中添加
          var has = false
          for (var i = 0; i < that.checkedEquipments.length; i++) {
            var aCheck = that.checkedEquipments[i]
            if (aCheck == userName) {
              has = true
              break
            }
          }
          if (!has) {
            that.checkedEquipments.push(userName)
          }
        } else {
          //从数组中取掉
          for (var i = 0; i < that.checkedEquipments.length; i++) {
            var aCheck = that.checkedEquipments[i]
            if (aCheck == userName) {
              that.checkedEquipments = that.checkedEquipments.slice(i, 1)
              break
            }
          }
        }
      },
      testOpen() {
        window.open('/kpipage.html', '_blank')
      }
    },
    mounted() {
      this.getDepts()
    }
  }
</script>

<style scoped>
  .header {
    /*border-bottom: 2px solid lightgrey;*/
    padding: 10px 10px 10px 0px;
  }

  .headerIcon {
    color: #00afff;
    font-weight: 900;
    font-size: 22px;
  }

  .headerText {
    font-weight: 600;
    font-size: 16px;
    padding-left: 10px;
  }

  .el-row {
    margin-bottom: 1px;

  &
  :last-child {
    margin-bottom: 0;
  }

  }
  .el-col {
    border-radius: 0px;
    vertical-align: middle;
  }

  .bg-purple-dark {
    /*background: #99a9bf;*/
  }

  .bg-purple {
    /*background: #d3dce6;*/
  }

  .bg-purple-light {
    /*background: #fbfbfb;*/
  }

  .grid-content {
    border-radius: 0px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  .listitem2 {
    width: 100%;
    height: 20px;
  }

  .listitem {
    width: 150px;
  }
</style>
